import React, { Component } from 'react'
/**
 * react中重点
 * 高阶组件（HOC）: 函数里面返回组件
 * 一种基于 React 的组合特性而形成的设计模式
 * 可以简单将其理解成 “类工厂”，一般在class组件时使用
 */
export class Hoc extends Component {
    render() {
        return (
            <div>
                <MySon1 />
                <MySon2 />
            </div>
        )
    }
}

export default Hoc;

// 额外：高阶函数(HOF)：函数立main返回函数


class Son1 extends Component{

    // state = {
    //     num: 2
    // };

    // componentDidMount(){
    //     setInterval(() => {
    //         this.setState({
    //             num: this.state.num + 2
    //         });
    //     },2000);
    // }

    render(){
        return (
            <h2>数字一：{this.props.num}</h2>
        )
    }
}

class Son2 extends Component{

    // state = {
    //     num: 1
    // };

    // componentDidMount(){
    //     setInterval(() => {
    //         this.setState({
    //             num: this.state.num + 1
    //         });
    //     },1000);
    // }

    render(){
        return (
            <h2>数字一：{this.props.num}</h2>
        )
    }
}

/**
 * 高阶组件
 * 这里把类封装到一个函数中并返回出来
 * 高阶组件中封装的类不需要名字
 * 重复代码封装为高阶组件
 * @param {*} comp 组件
 * @param {*} num 
 * @param {*} time 
 * @returns 
 */
function HocTest(Comp, result, time){
    return class extends Component{

        state =  {
            num: result
        }

        componentDidMount(){
            setInterval(() => {
                this.setState({
                    num: this.state.num + result
                });
            }, time);
        }

        render(){
            return <Comp num={this.state.num} />
        }
    }
}


// 使用 HocTest 构建组件
const MySon1 = HocTest(Son1, 1, 1000);
const MySon2 = HocTest(Son2, 2, 2000);


